<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全部学生页面</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            text-align: center;
        }
        a:hover{
            color: red;
            cursor:pointer;
        }
        table {
            /*text-align: center;*/
            width: 900px;
            border: 1px solid black;
            margin: 0 auto;
        }
        a{
            color: cornflowerblue;
        }
        span{
            margin-left: 10px;
        }
        #sec1{
            margin-top: 20px;
            margin-bottom: 20px;
        }

    </style>
</head>
<body>
    <div id="sec1">
        <h3 style="margin-bottom: 10px">添加学生</h3>
    <span>姓名：</span><input  type="text" id="sname">
    <span>性别：</span><input  type="radio" name="ssex" id="nan" value="男" checked>男
    <input  type="radio" name="ssex" id="nv" value="女">女
    <span>生日：</span><input  type="date" id="birth">
        <button id="addStu" style="margin-left: 10px;" >添加学生</button>
    </div>
<hr>
<table id="students">
    <h3 style="margin: 20px auto;">所有学生</h3>
    <thead>
    <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>生日</td>
        <td>删除操作</td>
        <td>修改操作</td>
    </tr>
    </thead>
    <tbody></tbody>
</table>
<div>
    <a id="firstPage">首页</a>
    <a id="lastPage">上一页</a>
    <span id="allPage"></span>
    <a id="nextPage">下一页</a>
    <a id="fanillyPage">尾页</a>
    <div><span id="message"></span></div>
</div>
<script src="/js/jquery-3.6.0.js"></script>
<script>

    $("#allPage").html(function (){

    })
    $("#firstPage").click(function () {
        pageNum=1;
        select(pageNum,pageSize);
    })
    $("#lastPage").click(function () {
        if (pageNum>1){
            pageNum--;
        }else {
            pageNum=1;
        }
        select(pageNum,pageSize);
    })
    $("#nextPage").click(function () {
        if (pageNum<pages){
            pageNum++;
        }else {
            pageNum=pages;
        }
        select(pageNum,pageSize);
    })
    $("#fanillyPage").click(function () {
        pageNum=pages;
        select(pageNum,pageSize);
    })
    function upd(id){

        var sid=id;
        sessionStorage.setItem("sid",sid);
        location.href="/admin/updStu.html";
    }
    function del(id){
        var b = window.confirm("你确定要删除吗？");
        if (b){
            var sid=id;
            $.ajax({
                url:"/admin/delStu",
                type:"post",
                data: "sid="+sid,
                success:function (data){
                    if (data==1){
                        alert("删除成功！")
                    }else {
                        alert("删除失败！")
                    }
                    location.href="/admin/showAll.html";
                }
            })
        }


    }

    var pageNum=1;
    var pageSize=3;
    var nums=0;
    var pages=0;
    select(pageNum,pageSize);
    function select(pageNum,pageSize){
        $.ajax({
            url:"/admin/showAllPage",
            type:"post",
            data:"pageNum="+pageNum+"&pageSize="+pageSize,
            success:function (data){
                pageNum=data.pageNum;
                pageSize=data.pageSize;
                nums=data.nums;
                pages=data.pages;
                $("#message").html("共"+nums+"条信息，共"+pages+"页，"+"当前第"+pageNum+"页");
                $("#students tbody").html("");
                $("#allPage").html("");

                for (var i=1;i<=pages;i++){
                    var a=$("<a class='aa' style='margin: 0 5px'>"+i+"</a>");
                    $("#allPage").append(a);
                }

                var studentList=data.students ;
                for (var s of studentList){
                    var tr=$("<tr></tr>");
                    var td1=$("<td>"+s.sid+"</td>");
                    var td2=$("<td>"+s.sname+"</td>");
                    var td3=$("<td>"+s.ssex+"</td>");
                    var td4=$("<td>"+s.birth+"</td>");
                    var td5=$("<td><a onclick='del("+s.sid+")'>删除</a></td>");
                    var td6=$("<td><a onclick='upd("+s.sid+")'>修改</a></td>");

                    tr.append(td1);
                    tr.append(td2);
                    tr.append(td3);
                    tr.append(td4);
                    tr.append(td5);
                    tr.append(td6);
                    $("#students").append(tr);
                }
            }
        })
    }


    $("#addStu").click(function (){
        var sname=$("#sname").val();
        var ssex=$('input:radio:checked').val();
        var birth=$("#birth").val();
        $.ajax({
            url: "/admin/addStu",
            type: "post",
            data:"sname="+sname+"&ssex="+ssex+"&birth="+birth,
            success:function (data) {
                if (data==1){
                    alert("添加成功！");
                }else {
                    alert("添加失败！");
                }
                location.href="/admin/showAll.html"
            }

        })


    })


    $("#allPage").on("click",".aa",function () {
        var i=$(this).text();
        pageNum=i;
        select(pageNum,pageSize);
    })
</script>
</body>
</html>